@tailwind base;
@tailwind components;
@tailwind utilities;


.search-detail-container:not(:first-of-type) {
    @apply my-6
}

.search-detail-container:first-of-type {
    @apply mb-6
}

.detail-card {
    width: 874px;
    display: grid;
    grid-template-columns: 100px 364px 410px;
    grid-template-rows: 100px 100px;
    grid-template-areas:
        "avatar id info"
        "connection connection connection"
    ;
}

.avatar-container {
    grid-area: avatar;
}

.id-container {
    @apply pl-3 pt-2;
    grid-area: id;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    grid-template-areas:
        "name age ethnic"
        "place_of_region id_number id_number"
        "tag tag tag"
    ;
}

.name-container {
    grid-area: name;
}

.age-container {
    grid-area: age;
}

.ethnic-container {
    grid-area: ethnic;
}

.place_of_region-container {
    grid-area: place_of_region;
}

.id_number-container {
    grid-area: id_number;
}

.tag-container {
    grid-area: tag;
}

.info-container {
    grid-area: info;
    @apply pl-3 pt-2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    grid-template-areas:
        "educational_background occupation"
        "phone_number phone_number"
        "tag tag"
    ;
}

.educational_background-container {
    grid-area: educational_background;
}

.occupation-container {
    grid-area: occupation;
}

.phone_number-container {
    grid-area: phone_number;
}

.connection-container {
    grid-area: connection;
    @apply pt-3
}